<template>
<div style="margin-top: 60px;">
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>设备在线统计</span>
          <el-button style="float: right; padding: 3px 0" type="text">设备总数：{{mediaTotal}} 台</el-button>
        </div>
        <div >
          <!-- <ve-ring :data="onlineData" height="350px" :extend="ringChartExtend" :settings="ringChartSettings"></ve-ring> -->
          <ve-ring :data="onlineData" height="350px" :settings="ringChartSettings"></ve-ring>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>上刊率统计</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div>
          <ve-ring :data="noProgData" height="350px" :settings="ringChartSettings"></ve-ring>
        </div>
      </el-card>
    </el-col>
  </el-row>
  
  <el-row :gutter="20" style="margin-top:10px;">
    <el-col :span="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>异常统计</span>
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
              size="mini" style="float: right;" @change="selectErrorDeviceByDate">
          </el-date-picker>
          <el-button-group style="float: right;margin:0px 3px;">
            <el-button  size="mini" :type="btnswich[0]" @click="getErrorDeviceStatistics(0)">当天</el-button>
            <el-button  size="mini" :type="btnswich[1]" @click="getErrorDeviceStatistics(-7)">近7天</el-button>
            <el-button  size="mini" :type="btnswich[2]" @click="getErrorDeviceStatistics(-30)">近30天</el-button>
          </el-button-group>
          
        </div>
        <div >
          <ve-line :data="errorDeviceData" :settings="sett"></ve-line>
          <el-pagination background :page-size="50" @current-change="changePage" :current-page="page.page1"
            layout="prev, pager, next,total"
            :total="errorDeviceData.total">
          </el-pagination>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="20" style="margin-top:10px;">
    <el-col :span="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>离线统计</span>
          <el-date-picker
            v-model="value3"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
              size="mini" style="float: right;" @change="selectOfflineDeviceByDate">
          </el-date-picker>
          <el-button-group style="float: right;margin:0px 3px;">
            <el-button size="mini" :type="btnswich2[0]" @click="getOfflineDeviceStatistics(0)">当天</el-button>
            <el-button size="mini" :type="btnswich2[1]" @click="getOfflineDeviceStatistics(-7)">近7天</el-button>
            <el-button size="mini" :type="btnswich2[2]" @click="getOfflineDeviceStatistics(-30)">近30天</el-button>
          </el-button-group>
        </div>
        <div>
          <ve-line :data="offlineDeviceData" :settings="sett2"></ve-line>
          <el-pagination background :page-size="50" @current-change="changePage2" :current-page="page.page2"
            layout="prev, pager, next,total"
            :total="offlineDeviceData.total">
          </el-pagination>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "Dashboard2",
  data() {
    return {
      onlineData:{
        columns:['name','num'],
        rows:[
        ]
      },
      noProgData:{ 
        columns:['name','num'],
        rows:[
        ]
      },
      errorDeviceData:{ 
        total:0,
        columns:['clientName','logNum'],
        rows:[
        ]
      },
      offlineDeviceData:{ 
        total:0,
        columns:['clientName','logNum'],
        rows:[
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick:(picker) => {
            picker.$emit('pick', this.zycmUtils.dateTimeArea(-7));
          }
        }, {
          text: '最近一个月',
          onClick:(picker) => {
            picker.$emit('pick', this.zycmUtils.dateTimeArea(-30));
          }
        }, {
          text: '最近三个月',
          onClick:(picker) => {
            picker.$emit('pick',this.zycmUtils.dateTimeArea(-90));
          }
        }]
      },
      value2: '',
      value3: '',
      sett:{
        labelMap: {
          logNum: '异常告警数'
        },
        max:35
      },
      sett2:{
        labelMap: {
          logNum: '离线次数'
        }
      },
      btnswich:["primary","",""],
      btnswich2:["primary","",""],
      page:{
        page1:1,
        page2:1
      },
      areaTime:{
        area1:[],
        area2:[]
      },
      ringChartSettings:{
        itemStyle:{
          color:(data) => {
            if (data.data.name === '在线') {
              return '#67c23a';
            } else if (data.data.name === '离线') {
              return '#f56c6c';
            } else if (data.data.name === '上刊数') {
              return '#67c23a';
            }else if (data.data.name === '空刊数') {
              return '#f56c6c';
            }else {
              return '#e6a23c';
            }
          }
        },
        label: {
          formatter: '{b}：{c}台',
        }
      },
      mediaTotal:0,

    }
  },
  created(){
    this.getMediaStatistics();
    this.getErrorDeviceStatistics(0);
    this.getOfflineDeviceStatistics(0);
  },
  methods: {
    async getMediaStatistics(){
      let formData = new FormData();
      const { data: res } = await this.$http.post(
        "mediaStatistics/selectMediaStatistics",
        formData
      );
      if(res && res.result === 'success'){
        //组装数据
        this.onlineData.rows.push({'name':'在线','num':res.data.onClient});
        this.onlineData.rows.push({'name':'离线','num':res.data.offClient}); 
        this.onlineData.rows.push({'name':'在线异常','num':res.data.exceptionClient}); 

        this.noProgData.rows.push({'name':'上刊数','num':res.data.totalClient - res.data.noProgClient});
        this.noProgData.rows.push({'name':'空刊数','num':res.data.noProgClient});

        this.mediaTotal = res.data.totalClient;
      }else{
        this.$message.error(res.message);
      }
    },
    //获取异常设备统计信息
    getErrorDeviceStatistics(type){
      this.page.page1 = 1;
      //let arr =[];
      if(type === 0){
        this.areaTime.area1 = this.zycmUtils.dateTimeArea(0);
        this.btnswichFun(this.btnswich,0);
      }else if(type === -7){
        this.areaTime.area1 = this.zycmUtils.dateTimeArea(-7);
        this.btnswichFun(this.btnswich,1);
      }else if(type === -30){
        this.areaTime.area1 = this.zycmUtils.dateTimeArea(-30);
        this.btnswichFun(this.btnswich,2);
      }
      if(this.areaTime.area1.length != 2){
        this.$message.error("转换时间区间处理异常");
      }
      this.getDeviceStatistics(4,this.areaTime.area1[0],this.areaTime.area1[1]);
    },
    async getDeviceStatistics(type,startTime,endTime,page){
      let formData = new FormData();
      formData.set("page", page || 1);
      formData.set("pageSize", 50);
      formData.set("startTime", startTime);
      formData.set("endTime", endTime);
      if(type === 1){
        formData.set("logType",1);
      }else if(type === 4){
        formData.set("logType",4);
      }
      
      const { data: res } = await this.$http.post(
        "mediaStatistics/pageStatisticsRunLog",
        formData
      );
      if(res && res.result === 'success'){
        //组装数据
        if(type === 1){
          this.offlineDeviceData.rows = res.dataList;
          this.offlineDeviceData.total = res.total;
        }else if(type === 4){
          this.errorDeviceData.rows = res.dataList;
          this.errorDeviceData.total = res.total;
        }
      }else{
        this.$message.error(res.message);
      }
    },
    //获取设备离线频率统计信息
    getOfflineDeviceStatistics(type){
      this.page.page1 = 1;
      //let arr =[];
      if(type === 0){
        this.areaTime.area2 = this.zycmUtils.dateTimeArea(0);
        this.btnswichFun(this.btnswich2,0);
      }else if(type === -7){
        this.areaTime.area2 = this.zycmUtils.dateTimeArea(-7);
        this.btnswichFun(this.btnswich2,1);
      }else if(type === -30){
        this.areaTime.area2 = this.zycmUtils.dateTimeArea(-30);
        this.btnswichFun(this.btnswich2,2);
      }
      if(this.areaTime.area2.length != 2){
        this.$message.error("转换时间区间处理异常");
      }
      this.getDeviceStatistics(1,this.areaTime.area2[0],this.areaTime.area2[1]);
    },
    selectErrorDeviceByDate(){
      if(this.value2.length != 2){
        this.$message.error("获取起始时间失败");
      }
      this.btnswichFun(this.btnswich,-1);
      this.areaTime.area1 = this.value2;
      this.getDeviceStatistics(4,this.value2[0],this.value2[1]);
    },
    selectOfflineDeviceByDate(){
      if(this.value3.length != 2){
        this.$message.error("获取起始时间失败");
      }
      this.btnswichFun(this.btnswich2,-1);
      this.areaTime.area2 = this.value3;
      this.getDeviceStatistics(1,this.value3[0],this.value3[1]);
    },
    btnswichFun(obj,type){
      for (let i = 0; i < 3; i++) {
        if(type === i){
          this.$set(obj,i,"primary");
          //obj[i]= "primary";
        }else{
          this.$set(obj,i,"");
          //obj[i]= "";
        }
      }
    },
    changePage(page){
      this.page.page1 = page;
      this.getDeviceStatistics(4,this.areaTime.area1[0],this.areaTime.area1[1],page);
    },
    changePage2(page){
      this.page.page2 = page;
      this.getDeviceStatistics(1,this.areaTime.area2[0],this.areaTime.area2[1],page);
    }
  }
};
</script>

<style lang="stylus">

</style>
